<!--案件预审确认弹窗-->

<template>
  <el-dialog append-to-body title="案件预审确认" width="40%" :visible="visible" @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-suffix="：" label-width="110px" class="white-card">
      <el-form-item label="案件名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="案件类型" prop="itemDetailId">
        <el-select v-model="form.itemDetailId" placeholder="请选择">
          <!-- <el-option label="全部" value=""></el-option> -->
          <el-option-group v-for="group in itemdetailTree" :key="group.label" :label="group.label">
            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="案件抄送：">
        <el-checkbox v-model="form.checked">案件抄送以下单位：</el-checkbox>
      </el-form-item> -->
      <!-- prop="departments" -->
      <el-form-item label="案件推送">
        <el-row>
          <el-col :span="12">
            <el-cascader ref="cascader2" :props="{ label: 'name', value: 'code', expandTrigger: 'hover', emitPath: false, checkStrictly: true }" :options="departmentTree2" v-model="form.dept" :show-all-levels="false"></el-cascader>
          </el-col>
          <el-col :span="12"><el-button type="primary" @click="onAdd" icon="el-icon-plus"></el-button></el-col>
        </el-row>
        <el-tag v-for="(tag, index) in form.departments" :key="tag.code" closable type="" @close="onDel(index)" size="small" style="margin-right: 10px">
          {{ tag.name }}
        </el-tag>
        <!-- <el-table v-if="departments.length" :data="departments" style="width: 100%">
          <el-table-column type="index" label="编号" width="180"></el-table-column>
          <el-table-column prop="name" label="单位名称" width="180"></el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="row">
              <el-button style="flex-shrink: 0; margin-left: 10px" @click="onDel(row.$index)" type="text" plain>取消抄送</el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </el-form-item>
    </el-form>
    <div class="split"></div>
    <div class="dialog-footer-btn">
      <el-button @click="handleClose" type="primary" plain>关闭</el-button>
      <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as mixins from "@/utils/mixins";
import * as workOrderApi from "@/api/workOrder/index";
import * as templateApi from "@/api/template";
import { department2Tree, findTreeItem, forEachTree, itemdetail2GroupOptions, removeEmptyChildren } from "@/utils/common";
import * as mattersApi from "@/api/matters";
import { mapState } from "vuex";

export default {
  name: "acceptAndTransferDialog",
  mixins: [mixins.dialog, mixins.form],
  props: ["visible", "workOrderNo", "workOrder"],
  data() {
    return {
      itemdetailTree: [],
      form: {
        title: "",
        checked: false,
        itemDetailId: "",
        processDepartmentName: "",
        dept: [],
        departments: [],
      },
      rules: {
        title: [{ required: true, message: "请填写" }],
        itemDetailId: [{ required: true, message: "请选择" }],
        departments: [{ required: true, message: "请选择" }],
      },
      submitting: false,
      departmentTree: [],
      departmentTree2: [],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {},
  methods: {
    handleClose() {
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
    onDel(index) {
      this.form.departments.splice(index, 1);
    },
    onAdd() {
      const node = this.$refs.cascader2.getCheckedNodes()[0];
      if (node) {
        const existNode = this.form.departments.find((a) => a.code === node.data.code);
        if (existNode) {
          existNode.del = false;
        } else {
          this.form.departments.push({
            name: node.data.name,
            code: node.data.code,
            comment2: "",
            new: true,
            del: false,
          });
        }
        this.$refs.cascader2.handleClear();
      }
    },
    show() {
      // console.log(this.workOrder);
      this.form.title = this.workOrder?.title;
      mattersApi.itemdetailTree().then((res) => {
        this.itemdetailTree = itemdetail2GroupOptions(res.result);
      });
      workOrderApi.all.departmentTree().then((res) => {
        this.departmentTree = forEachTree(department2Tree(res.result, false), (a) => {
          if (a.code === this.userInfo.orgCode) {
            a.disabled = true;
          }
        });
        this.departmentTree2 = forEachTree(department2Tree(res.result, false), (a) => {
          if (a.code === this.userInfo.orgCode) {
            a.disabled = true;
          }
        });
      });
    },
    handleSubmit() {
      this.validateAndConfirm("form").then((res) => {
        this.submitting = true;
        var params = {
          workOrderNo: this.workOrderNo,
          title: this.form.title,
          itemCode: this.form.itemDetailId,
        };
        for (var i = 0; i < this.itemdetailTree.length; i++) {
          for (var k = 0; k < this.itemdetailTree[i].options.length; k++) {
            if (this.form.itemDetailId == this.itemdetailTree[i].options[k].id) {
              params.itemName = this.itemdetailTree[i].options[k].name;
            }
          }
        }

        // if (this.form.checked) {
        params.pushDepartmentCode = this.form.departments.map((a) => a.code).join(";");
        params.pushDepartmentName = this.form.departments.map((a) => a.name).join(";");
        // }
        params.departmentDtoList = this.form.departments.map((item) => {
          return {
            departmentCode: item.code,
            departmentName: item.name,
          };
        });
        console.log("params :>> ", params);
        workOrderApi.all.confirm(params).then((r) => {
          this.submitting = false;
          this.$emit("success");
          this.handleClose();
          this.$message.success(r.msg);
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-select,
.el-cascader {
  width: 100%;
}
</style>
